<template>
  <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px" class="demo-ruleForm">
    <el-row>
      <el-col :span="12">
        <el-form-item label="地块" prop="temp_avg">
          <el-select v-model="formData.field_id" placeholder="请选择所在地块" filterable clearable style="width:240px">
            <el-option
              v-for="(item,index) in fields.filter((val) => { return +val.project_id === +project.id})"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="日期" prop="gdate">
          <el-date-picker
            v-model="formData.gdate"
            type="date"
            placeholder="日期"
            value-format="yyyy-MM-dd"
          /></el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="湿度" prop="temp_avg">
      <el-table
        :data="formData.rows"
        border
        style="width: 100%"
        height="250"
      >
        <el-table-column
          fixed
          prop="position"
          label="深度"
          align="center"
          width="100px"
        />
        <el-table-column
          prop="val_min"
          label="最低湿度(%)"
          align="center"
        >
          <template #default="scope">
            <el-input v-model="scope.row.val_min" placeholder="最低湿度" type="number" />
          </template>
        </el-table-column>
        <el-table-column
          prop="val_max"
          label="最高湿度(%)"
          align="center"
        >
          <template #default="scope">
            <el-input v-model="scope.row.val_max" placeholder="最高湿度" type="number" />
          </template>
        </el-table-column>
        <el-table-column
          prop="val_avg"
          label="平均湿度(%)"
          align="center"
        >
          <template #default="scope">
            <el-input v-model="scope.row.val_avg" placeholder="平均湿度" type="number" />
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit('ruleForm')">提交</el-button>
      <el-button @click="reset('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['project', 'fields'])
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.formData)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
